<div [formGroup]="form" class="container">
	<div *ngIf="form.get('old')" style="display: flex; align-items: center;">
		<mat-card class="oldValues" formGroupName="old">
			<mat-card-content>
				<div>
					<mat-form-field appearance="outline" style="width: 100%;">
						<mat-label>Column Name</mat-label>
						<input autocomplete="off"
							   formControlName="name"
							   matInput>
					</mat-form-field>

					<mat-slide-toggle
						formControlName="nullable"
						color="primary">
						Nullable
					</mat-slide-toggle>
				</div>

				<div>
					<mat-form-field appearance="outline">
						<mat-label>Type</mat-label>
						<textarea
							cdkTextareaAutosize
							formControlName="type"
							matInput
							type="text">
						</textarea>
					</mat-form-field>
				</div>
				<div>
					<mat-form-field>
						<mat-label>Default value on null</mat-label>
						<input
							formControlName="defaut"
							matInput>
					</mat-form-field>
				</div>
				<div *ngIf="extraAttributes.length">
					<mat-form-field appearance="outline" style="margin-bottom: -1.25em">
						<mat-label>Extras</mat-label>
						<mat-select formControlName="extra" multiple></mat-select>
					</mat-form-field>
				</div>
			</mat-card-content>
		</mat-card>
	</div>

	<div class="newValues" formArrayName="columns" style="display: flex">
		<mat-card *ngFor="let column of formColumn.controls; let i = index"
				  [formGroupName]="i">

			<mat-card-content>
				<div>
					<mat-form-field appearance="outline" style="width: 100%;">
						<mat-label>Column Name</mat-label>
						<input autocomplete="off"
							   formControlName="name"
							   matInput>
						<mat-error *ngIf="column.get('name')?.errors && column.get('name')!.errors!['pattern']">
							Prefer [alpha, numeric, "_", "-"] with 2 min chars
						</mat-error>
						<mat-error *ngIf="column.get('name')?.errors && column.get('name')!.errors!['unique']">
							Name already used
						</mat-error>
					</mat-form-field>

					<mat-slide-toggle
						formControlName="nullable"
						color="primary">
						Nullable
					</mat-slide-toggle>
				</div>

				<div>
					<mat-form-field appearance="outline">
						<mat-label>Type</mat-label>
						<textarea
							cdkTextareaAutosize
							formControlName="type"
							matInput
							type="text">
						</textarea>
						<mat-error *ngIf="column.get('type')?.errors && column.get('type')!.errors!['required']">
							Type is required
						</mat-error>
						<mat-error *ngIf="column.get('type')?.errors && column.get('type')!.errors!['checkParams']">
							Parentheses contains error
						</mat-error>
						<mat-error *ngIf="column.get('type')?.errors && column.get('type')!.errors!['typeUnknown']">
							Type unknown
						</mat-error>
					</mat-form-field>

					<div>
						<button (click)="typeSuggestion.open()"
								color="primary"
								mat-icon-button
								mat-stroked-button
								matTooltip="Choose from type list">
							<span class="material-symbols-outlined notranslate">
								list
							</span>
						</button>

						<mat-select
							#typeSuggestion
							(selectionChange)="column.get('type')?.patchValue($event.value)"
							class="hide">
							<mat-optgroup
								*ngFor="let group of typeGroups"
								[label]="group.name"
								class="hasBold">
								<mat-option
									*ngFor="let type of group.list"
									[class.bold]="type.bold"
									[value]="type.id">
									<span
										[matTooltip]="type.description ? type.description : ''"
										matTooltipPosition="left">
										{{ type.id }}
									</span>
								</mat-option>
							</mat-optgroup>
						</mat-select>

						<button
							(click)="column.get('type')!.patchValue(column.get('type')?.value && column.get('type')!.value.endsWith('[]') ? column.get('type')!.value.substring(0, column.get('type')!.value.indexOf('[]')) : column.get('type')!.value + '[]')"
							*ngIf="selectedServer!.driver.language.arrayType"
							[class.mat-raised-button]="column.get('type')?.value && !isNested(column.get('type')?.value) && column.get('type')!.value.endsWith('[]')"
							color="primary"
							mat-icon-button
							matTooltip="Set type an array of">
							<span class="material-symbols-outlined notranslate">
								data_array
							</span>
						</button>
					</div>
				</div>

				<div class="default">
					<mat-form-field appearance="fill" style="margin-bottom: -1.25em">
						<mat-label>Default Value</mat-label>
						<mat-select>
							<mat-option
								(click)="column.get('defaut')!.patchValue(false)"
								*ngIf="isSQL(selectedServer)">
								Nothing
							</mat-option>
							<mat-option (click)="column.get('defaut')!.patchValue(null)">
								<span class="special">NULL</span>
							</mat-option>
							<mat-option
								(click)="column.get('defaut')!.patchValue('\'\'')">
								Empty String
							</mat-option>
							<mat-option (click)="column.get('defaut')!.patchValue('\'Custom\'')">
								Custom
							</mat-option>
							<mat-option
								(click)="column.get('defaut')?.patchValue(fct)"
								*ngFor="let fct of selectedServer!.driver.language.fctAsDefault">
								{{ fct }}
							</mat-option>
						</mat-select>
					</mat-form-field>

					<mat-form-field
						[hidden]="column.get('defaut')?.value === false || column.get('defaut')?.value === null"
						style="margin-bottom: -1.25em">
						<textarea
							cdkTextareaAutosize
							formControlName="defaut"
							matInput
							type="text">
							</textarea>
					</mat-form-field>
				</div>

				<div>
					<mat-form-field
						*ngIf="extraAttributes.length"
						appearance="outline"
						style="margin-bottom: -1.25em">
						<mat-label>Extras</mat-label>
						<mat-select formControlName="extra" multiple>
							<mat-option
								*ngFor="let ext of extraAttributes"
								[value]="ext">
								{{ ext }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</div>

				<div *ngIf="!form.get('old')" class="actions">
					<button (click)="copyColumn(column.value)"
							color="primary"
							mat-icon-button
							matTooltip="Duplicate Column">
						<span class="material-symbols-outlined notranslate">
							content_copy
						</span>
					</button>

					<button (click)="formColumn.removeAt(i)"
							*ngIf="formColumn.controls.length > 1"
							color="warn"
							mat-icon-button
							matTooltip="Delete Column">
						<span class="material-symbols-outlined notranslate">
							delete
						</span>
					</button>
				</div>
			</mat-card-content>
		</mat-card>
	</div>
</div>
